﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>我的动态</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
    <script type="text/javascript" src="../plugins/weui/js/weui.min.js"></script>
</head>
<style type="text/css">
body{background-color:#F3F3F3;width:100%;overflow-x:hidden}
.container{padding-bottom:100px}
.tabbar{position:fixed;bottom:0}
.card_box{width:93%;background-color:#fff;border-radius:3px;margin-top:15px;margin-left:auto;margin-right:auto}
.card_content{width:90%;margin-left:auto;margin-right:auto;padding:20px 0}
.title{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}
.title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.title img{width:45px;height:45px}
.box-email{display:flex;flex-direction:row;justify-content:space-between;align-items:center}
.box-email img{width:20px;height:20px}
.box-email{padding:10px 15px;border-top:1px solid #ddd}
.box-email span{color:#666}
.color_g{color:#666;padding-top:5px}
.card_desc{margin-top:15px}
.state_box{background-color:#fff;margin-top:15px;padding-top:20px}
.day_item{display:-webkit-flex;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}
.left_item{width:20%;text-align:center;display:-webkit-flex;display:flex;justify-content:center;align-items:center}
.right_item{width:80%}
.list_info{display:-webkit-flex;display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start}
.content_img{width:45%;height:100px;justify-content:flex-start;align-items:flex-start;overflow:hidden;}
    .content_img > img {margin:1px;}
.content_img1{width:90%;height:80px}
.content_img2{width:45%;height:80px}
.content_img3{width:30%;height:43px}
.content_img4{width:45%;height:43px}
.list-right{width:100%;height:90px;display:-webkit-flex;display:flex;flex-direction:column;justify-content:space-between;margin-top:-5px}
.list-right img{width:15px;height:15px}
.list_title{word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.footer_total{display:-webkit-flex;display:flex;flex-direction:row;justify-content:space-between;align-items:center}
.count_pt{font-size:12px}
.likes_right{display:-webkit-flex;display:flex;justify-content:flex-end;align-items:center;padding-right:15px;font-size:12px}
.float-btn{width:55px;height:55px;position:fixed;bottom:60px;right:20px}
.float-btn img{width:55px;height:55px}
</style>

<body>
    <div class="container">
        <div class="card_box">
            <div class="card_content">
                <div class="title">
                    <span style="color: #666;" class="company" title="公司"></span>
                        <img src="../images/avater_def.png" class="avater" onclick="viewImg(this)">
                </div>
                <div class="card_desc">
                    <h3 style="color: #676B91;" class="name" title="名字"></h3>
                    <p class="color_g f12 position" title="职位"></p>
                    <p class="color_g f12 mobile" title="电话"></p>
                </div>
            </div>
            <div class="box-email a-card">
                <span><span class="name"></span>的名片</span>
                <div>
                    <img src="../images/boss/21.png">
                    <img src="../images/boss/20.png">
                </div>
            </div>
        </div>
        <!--动态列表-->
        <div class="state_box list">
       
        </div>
    </div>
    <div class="float-btn">
        <img src="../images/boss/10.png">
    </div>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/base.js"></script>
    <script>
        $(function () {
            loadStaff();
            loadBlog();
        })

        //员工名片
        function loadStaff() {
            ajaxGet(siteApiList.GetInfo + "?id=" + staffId, function (data) {
                if (!isJsonSuccess(data))
                    return;
                var item = data.Data;
                $(".avater").attr("src", siteConfig.formatAvater(item.Avater))
                $(".company").html(item.Company)
                $(".department").html(item.Department)
                $(".email").html(item.Email)
                $(".mobile").html(item.Mobile)
                $(".name").html(item.Name)
                $(".position").html(item.Position)
                $(".phone").html(item.Phone)
            })
        }

        //我的动态
        function loadBlog() {
            ajaxGet(siteApiList.MyBlogList + "?storeId=" + storeid + "&uid=" + userid, function (data) {
                if (!isJsonSuccess(data))
                    return;
                var html = "";
                for (var i = 0; i < data.Data.BlogList.length; i++) {
                    html += loadItem(data.Data.BlogList[i]);
                }
                $(".list").append(html);
                loadBtn();
            })
        }

        function loadItem(item) {
            var commentCount = item.CommentList != null ? item.CommentList.length : 0;
            var arrImg = item.Imgs.split(',');
            var className = "content_img" + arrImg.length;
            var html = "";
            html += "<div class='day_item'>"
            html += "<div class='left_item'>" + formatDate(item.Addtime) + "</div>"
            html += "<div class='right_item' data-id=" + item.Id + ">"
            html += "<div class='list_info'>"
            
            //图片
            html += "<div class='content_img'>"
            if (arrImg.length == 1) {
                if (siteConfig.formatBlogImage(arrImg[0]) != '')
                html += "<img class='content_img1' src='" + siteConfig.formatBlogImage(arrImg[0]) + "' alt=''>"
            } else if (arrImg.length == 2) {
                if (siteConfig.formatBlogImage(arrImg[0]) != '')
                    html += "<img class='content_img2' src='" + siteConfig.formatBlogImage(arrImg[0]) + "' alt=''>"
                if (siteConfig.formatBlogImage(arrImg[1]) != '')
                html += "<img class='content_img2' src='" + siteConfig.formatBlogImage(arrImg[1]) + "' alt=''>"
            } else if (arrImg.length == 3) {
                if (siteConfig.formatBlogImage(arrImg[0]) != '')
                    html += "<img class='content_img3' src='" + siteConfig.formatBlogImage(arrImg[0]) + "' alt=''>"
                if (siteConfig.formatBlogImage(arrImg[1]) != '')
                    html += "<img class='content_img3' src='" + siteConfig.formatBlogImage(arrImg[1]) + "' alt=''>"
                if (siteConfig.formatBlogImage(arrImg[2]) != '')
                html += "<img class='content_img3' src='" + siteConfig.formatBlogImage(arrImg[2]) + "' alt=''>"
            } else if (arrImg.length > 3) {
                if (siteConfig.formatBlogImage(arrImg[0]) != '')
                    html += "<img class='content_img4' src='" + siteConfig.formatBlogImage(arrImg[0]) + "' alt=''>"
                if (siteConfig.formatBlogImage(arrImg[1]) != '')
                    html += "<img class='content_img4' src='" + siteConfig.formatBlogImage(arrImg[1]) + "' alt=''>"
                if (siteConfig.formatBlogImage(arrImg[2]) != '')
                    html += "<img class='content_img4' src='" + siteConfig.formatBlogImage(arrImg[2]) + "' alt=''>"
                if (siteConfig.formatBlogImage(arrImg[3]) != '')
                    html += "<img class='content_img4' src='" + siteConfig.formatBlogImage(arrImg[3]) + "' alt=''>"
            }
            html += "</div>"

            html += "<div class='list-right'>"
            html += "<div class='list_title'>" + subString($.trim(item.Content), 26) + "</div>"
            html += "<div class='footer_total'><div class='count_pt'>共" + arrImg.length + "张</div>"
            html += "<div class='likes_right'>"
            html += "<div style='padding-right: 10px;'><img src='../images/boss/18.png'><span>" + item.UpCount + "</span></div>"
            html += "<div><img src='../images/boss/19.png'><span>" + commentCount + "</span></div>"
            html += "</div>"

            html += "</div></div></div></div></div>"
            return html;
        }

        function loadBtn() {
            $(".a-card").click(function () { toUrl(siteUrlList.MyCard) });
            $(".right_item").click(function () {
                toUrl(siteUrlList.MyBlogDetail + "?blogid=" + $(this).attr("data-id"));
            });
            $(".float-btn").click(function () { toUrl("editor.html") });
        }

        function subString(str, len) {
            if(str.length>len)
                return str.substring(0, len) + "...";
            return str;
        }  

        //日期格式化
        function formatDate(strDate) {
            var curDate = new Date();
            var date = convertDate(strDate);
            var _date = "<h1>" + date.getDate() + "</h1><span style='padding-top: 10px;'>" + (date.getMonth() + 1) + "月</span>";
            if (curDate.getFullYear() == date.getFullYear() && curDate.getMonth() == date.getMonth() && curDate.getDate() == date.getDate())
                _date = "今天"
            return _date;
        }

        //字符串转日期
        function convertDate(dateString) {
            if (dateString) {
                var date = new Date(dateString.replace(/-/, "/"))
                return date;
            }
        }

        //预览图片
        function viewImg(obj) {
            var src = obj.currentSrc;
            var gallery = weui.gallery(src);
            $('.weui-gallery__opr').css('display', 'none');
        }
    </script>
</body>

</html>